<template>
  <div>
    <xTable :tableConfig="tableConfig">
    <template #operation="scoped">
      <a-button type="text" status="warning">重置密码</a-button>

      <a-button type="text" @click="handleEditUserInfo(scoped.record)">编辑</a-button>
    </template>  
    </xTable>
      <editUserInfoDialog v-model:visible="visible"  :modelType="dialogType" :user="editUser" @submit="getTableData"></editUserInfoDialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted} from 'vue'
import type { PropType,Ref } from 'vue'
import xTable, { useTable } from '@/components/common/x-table'
import type { TableData, TableColumnData } from '@arco-design/web-vue'
import UserApi from '@/api/user/UserApi'
import editUserInfoDialog from '@/components/system/user/editUserInfoDialog.vue'
let [configRef, getTableData] = useTable(
    {
        'rowKey': 'menuId',
        selectedKeys:[],
        rowSelection: {
            type: 'checkbox',
            showCheckedAll: true,
            checkStrictly: true
        },
        columns: [
            {
                title: '用户昵称',
                dataIndex: 'username'
            },
            {
                title: '账号',
                dataIndex: 'account'
            },

            {
              title: '操作',
              width: 200,
              dataIndex: 'operation',
              slotName: 'operation'
            }
        ],
        data: [],
        pagination: {
            total: 0,
            pageSize: 1000,
            current: 1
        }
    },
    formatSearchResult
)
let tableConfig = ref(configRef)

function formatSearchResult(
    pageSize: number,
    current: number
): Promise<{ total: number; data: TableData[] }> {
   
    return UserApi.getAllUserList(current,pageSize).then(res => {
        if (res.code == 200) {
            return {
                total: res.data.total,
                data:res.data.list
            }
        } else {
            return {
                total: 0,
                data: []
            }
        }
    })
}

getTableData()

//-------------------------------编辑用户弹框start--------------------------------------
let visible=ref(false)
let editUser:Ref<UserType.User|null>=ref(null)
let dialogType=ref('add') //'add'|'edit'
function handleEditUserInfo(row:UserType.User){
  visible.value=true
  dialogType.value='edit'
  editUser.value=row
}

//-------------------------------编辑用户弹框end--------------------------------------
</script>
<style scoped lang="scss">
</style>